<template>
	<view class="provider">
		<view class="nav">
			<view class="navs">商家介绍</view>
		</view>
		<view class="personal">
			<image src="../../../static/img/store-header.png" mode=""></image>
			<view class="name">徐胖胖</view>
			<view class="time"><text class="times">注册时间：2020-03-14</text><text>ID：1234567</text></view>
			<view class="deal">
				<view class="zero"  v-for="(item,index) in proList"  @click="getUrl(item.url)">
					{{item.txt}}
					<view>{{item.title}}</view>
			    </view>
			</view>
		</view>
		<view class="message">
			<view class="basic">基本信息</view>
			<view class="mes" v-for="(item,index) in messageList" >
				<view class="pattern">
					{{item.txt}}
					<view class="plant" :style="index>1?'color:#999':'color:#333'">{{item.plant}}<image :src="item.img" mode=""></image></view>
				</view>
			</view>
			<view class="basic">主营信息</view>
			<view class="mes" v-for="(item,key) in messagesList" >
				<view class="pattern">
					{{item.txt}}
					<view class="plant">{{item.plant}}<image :src="item.img" mode=""></image></view>
				</view>
			</view>
			<view class="basic">店铺照片/视频</view>
			<view class="mes" v-for="(item,indexs) in photoList" >
				<view class="pattern pattern-pho">
					<image :src="item.pic" class="photos"></image>
					<view class="plant"><image :src="item.img" class="sotre-more"></image></view>
				</view>
			</view>
			<view class="mes" v-for="(item,index) in sellList" >
				<view class="pattern sell">
					{{item.txt}}
					<view class="plant">{{item.title}}</image></view>
				</view>
			</view>
		</view>
		<view class="footer">
			<view class="foot"  v-for="(item,items) in footList"  @click="getUrl(item.url)">
				<image :src="item.img"></image>
				<view :style="item.txt=='商家介绍'?'color:#55C47D':''">{{item.txt}}</view>
			</view>
		</view>
	</view>
</template>

<script>
export default{
	data(){
		return{
			proList:[
				{txt: 0,title: "访客",url: 'jiaoyie'},
				{txt: 0,title: "沟通",url: 'consult'},
				{txt: 0,title: "联系人",url: 'browse'}
			],
			messageList:[
				{txt: "经营模式",plant: '种植户',img: '/static/img/store-more.png'},
				{txt: "经营地址",plant: '山东省临沂市莒南县',img: '/static/img/store-more.png'},
				{txt: "身份认证",plant: '去认证',img: '/static/img/store-more.png'},
				{txt: "商家等级",plant: '去开启',img: '/static/img/store-more.png'},
				{txt: "交易勋章",plant: '去开启',img: '/static/img/store-more.png'}
			],
			messagesList:[
				{txt: "主营产品",plant: '种植户',img: '/static/img/store-more.png'},		
			],
			photoList:[
				{pic: "/static/img/photos.png",img: '/static/img/store-more.png'},
				
			],
			sellList:[
				{txt: "店铺销售",title: '30万元'},
				{txt: "近期采购",title: '30万元'},
				{},
				{},
			],
			footList:[
				{img:'/static/img/pro-index.png',txt: '首页',url:'storeguanli'},
				{img:'/static/img/pro-jieshaoactive.png',txt: '商家介绍',url:'provider'},
				{img:'/static/img/pro-shezhi.png',txt: '商家设置',url:'storeset'}
			]
		}
	},
	methods:{
		getUrl(url){
			console.log(url);
			uni.navigateTo({
				url:url
			})
		}
	}
}
</script>

<style lang="scss">
.provider{
	color: #666;
	.nav{
		padding-top: 70upx;
		.navs{
			text-align: center;
			font-size:36upx;
			font-weight:500;
			color:rgba(51,51,51,1);
		}
	}
	.personal{
		padding: 29upx;
		image{
			width: 101upx;
			height: 101upx;
			float: left;
			padding-right: 24upx;
		}
		.name{
			font-size: 30upx;
			padding-top: 10upx;
			color: #333;
		}
		.time{
			font-size: 26upx;
			padding-top: 18upx;
			.times{
				padding-right: 20upx;
			}
		}
		.deal{
			padding-top: 40upx;
			font-size: 26upx;
			display: flex;
			.zero{
				text-align: center;
				justify-content: space-between;
				width: 33.3%;
				line-height: 40upx;
			}
		}
	}
	.message{
		width:100%;	
		background-color: #F7F4F8;
		
		.basic{
			font-size: 26upx;
			padding: 25upx 30upx;
		}
		.mes{
			background-color: #fff;
			.pattern{
				padding: 25upx 30upx;
				font-size: 30upx;
				border-bottom: 1px solid #FCF9FC; 
				color: #333;
				.plant{
					float: right;
					font-size: 28upx;
					image{
						width: 25upx;
						height: 25upx;
						vertical-align: middle;
						padding-left: 23upx;
					}
				}			
			}
			.pattern-pho{
				.photos{
					width: 140upx;
					height: 140upx;
				}
				.sotre-more{
					padding-top: 72.5upx;
				}
			}
			.sell{
				margin-top: 20upx;
				border-bottom:none;
				.plant{
					color: #F40E0E;
				}
			}
		}
	
	}
	.footer{
		width: 100%;
		height: 100upx;
		background-color: #fff;
		display: flex;
		justify-content: space-between;
		position: fixed;
		bottom: 0;
		.foot{
			width: 33.3%;
			text-align: center;
			font-size: 24upx;
			padding-top: 10upx;
			image{
				width: 42upx;
				height: 40upx;
			}
		}
	}
}
</style>
